<template>
  <div class="div">
    <div class="head">
      <div></div>
      <div>购物车</div>
      <span @click="decide = !decide">{{ decide ? "完成" : "编辑" }}</span>
    </div>
    <div class="content">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div class="cart-product-item" v-for="it in ling" :key="it.id">
          <van-checkbox
            :name="it"
            checked-color="red"
            @click="dainji"
          ></van-checkbox>
          <img :src="it.image" alt="" @click="tiaozhuan(it.id)" />
          <div class="content1">
            <div @click="tiaozhuan(it.id)">{{ it.name }}</div>
            <div class="opt">
              <span><em>￥</em>{{ it.price }}</span>
              <span class="r">
                <button @click="jian(it)">-</button>
                {{ it.nu }}
                <button class="add" @click="jia(it)">+</button>
              </span>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="settle">
      <van-checkbox
        class="qx"
        v-model="but"
        type="info"
        checked-color="red"
        @click="checkAll"
      >
        全选</van-checkbox
      >
      <div v-if="!decide" class="info">
        <span><em>￥</em>{{ totalAmount.toFixed(1) }}</span>
        <div>已优惠:￥{{ (totalAmount * 0.2).toFixed(1) }}</div>
      </div>
      <van-button v-if="decide" @click="arrMove()">删除</van-button>
      <van-button v-if="!decide"
        >去结算({{ (totalAmount * 0.8).toFixed(1) }})</van-button
      >
    </div>
    <subscript />
  </div>
</template>
<script>
export default {
  data() {
    return {
      decide: false,
      ling: [],
      result: [],
      but: false,
    };
  },
  computed: {
    totalAmount() {
      return this.result.reduce((_t, _it) => {
        _t += _it.price * _it.nu;
        return _t;
      }, 0);
    },
  },
  created() {
    let shuju = this.$store.getters["welfareah/getdoods"];
    let _shuju = [];
    shuju.map((item, index) => {
      _shuju.push(Object.assign({}, item, { nu: 1 }));
    });
    this.ling = [..._shuju];
  },
  methods: {
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
      this.but = true;
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    dainji() {
      if (this.ling.length === this.result.length) {
        this.but = true;
      } else {
        this.but = false;
      }
    },
    arrMove() {
      this.result.forEach((it) => {
        this.ling = this.ling.filter((item) => {
          return item.id != it.id;
        });
      });
    },
    jian(it) {
      if (it.nu > 1) {
        it.nu--;
      }
    },
    jia(it) {
      it.nu++;
    },
    tiaozhuan(it) {
      this.$router.push({ path: "/details", query: { id: it } });
    },
  },
};
</script>
<style lang="less" scoped>
.cart-product-item {
  display: flex;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  margin: 0 12px 12px;
  .van-checkbox {
    flex: 0 0 30px;
    font-size: 14px;
  }
  img {
    flex: 0 0 96px;
    height: 96px;
    width: 0;
    border: solid 1px #eaeaea;
    border-radius: 4px;
  }
  .content1 {
    font-size: 12px;
    flex: 1;
    padding-left: 12px;
    width: 0;
    .msg {
      display: block;
      font-size: 16px;
      color: #1e1e1e;
      font-weight: 600;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .opt {
      display: flex;
      height: 44px;
      justify-content: space-between;
      span {
        flex: 0 0 56px;
        line-height: 44px;
        font-size: 14px;
        font-weight: 500;
        color: red;
        em {
          font-size: 12px;
          font-style: normal;
        }
        &.r {
          flex: 1;
          font-size: 14px;
          color: #333;
        }
        button {
          color: #fff;
          background: #f34336;
          border: 0;
          border-radius: 20px;
          line-height: 20px;
          width: 20px;
        }
      }
    }
  }
}

.div {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  .head {
    padding: 0 20px;
    background: #fff;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    padding-top: 10px;
    background: #f2f2f2;
    flex: 1;
    overflow-y: auto;
  }
  .settle {
    background: #fff;
    display: flex;
    justify-content: space-between;

    .info {
      font-size: 16px;
      text-align: right;
      padding-left: 50px;
      div {
        font-size: 12px;
      }
    }
    .qx {
      margin-left: 10px;
    }
    button {
      color: #fff;
      background-color: #f34336;
      border: 0px;
    }
  }
}
</style>